$bg: $background_color
#main-menu-bar
  background: $bg
  height: 26px
  border-bottom: 1px solid $border_color
  ul
    background: $bg
    border: 1px solid $border_color
    border-top: 0
    //border-top: 1px solid #444

.ui-menubar
  list-style: none
  margin: 0
  padding-left: 0

.ui-menubar-item
  float: left

.ui-menubar
  .ui-button
    float: left
    font-weight: normal
    border-top-width: 0 !important
    border-bottom-width: 0 !important
    margin: 0
    outline: none
  .ui-menubar-link
    border-right: 1px dashed transparent
    border-left: 1px dashed transparent
  .ui-menu
    width: 200px
    position: absolute
    z-index: 9999

.ui-menu
  list-style: none
  padding: 0
  margin: 0
  display: block
  outline: none
  // Add a pseudo element to attenuate the border between the menu and submenu.
  &:before
    content: ""
    display: block
    height: 1px
    position: absolute
    top: 0px
    left: 0
    right: 0
    background: darken($background_color, 2%)

  .ui-menu
    margin-top: -3px
    position: absolute

  .separator
    border-bottom: 1px solid #444
    margin-top: 5px
    margin-bottom: 5px

  .ui-menu-item
    margin: 0
    padding: 0
    zoom: 1
    width: 100%
    display: block

    a
      text-decoration: none
      display: block
      padding: 2px 10px
      line-height: 1.5
      zoom: 1
      font-weight: normal
      &.ui-state-focus, &.ui-state-active
        font-weight: normal

    &.expanded > a
      padding-left: 20px
      background: image-url("menu-expanded.png") no-repeat 9px 7px

  li.ui-state-disabled
    font-weight: normal
    padding: .0em .4em
    margin: .4em 0 .2em
    line-height: 1.5


.ui-menu-icons
  position: relative
  .ui-menu-item a
    position: relative
    padding-left: 2em

.ui-menu
  .ui-icon
    position: absolute
    top: .2em
    left: .2em
  .ui-menu-icon
    position: static
    float: right

.ui-button
  position: relative
  display: inline-block
  padding: 0
  margin-right: .1em
  text-decoration: none !important
  cursor: pointer
  text-align: center
  zoom: 1
  overflow: visible

.ui-button-icon-only
  width: 2.2em

button.ui-button-icon-only
  width: 2.4em

.ui-button-icons-only
  width: 3.4em

button.ui-button-icons-only
  width: 3.7em

.ui-button .ui-button-text
  display: block
  line-height: 1.4

.ui-button-text-only .ui-button-text
  padding: .4em 1em

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text
  padding: .4em
  text-indent: -9999999px

.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text
  padding: .4em 1em .4em 2.1em

.ui-button-text-icon-secondary .ui-button-text
  padding: .4em 2.1em .4em 1em

.ui-button-text-icons .ui-button-text
  padding: .4em 2.1em .4em 1em
  padding-left: 2.1em
  padding-right: 2.1em

input.ui-button
  padding: .4em 1em

.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon
  position: absolute
  top: 50%
  margin-top: -8px

.ui-button-icon-only .ui-icon
  left: 50%
  margin-left: -8px

.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary
  left: .5em

.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary
  right: .5em

.ui-buttonset
  margin-right: 7px
  .ui-button
    margin-left: 0
    margin-right: -0.3em

button.ui-button::-moz-focus-inner
  border: 0
  padding: 0

